<template>
  <div class="home">
    <Header v-if="!shows" />

 <div class="content" v-if="!shows">     
<div class="price">
  <div class="box">
    <div class="txt">{{$t('m.当前全网质押')}}:</div>
    <div class="num">{{dexc(info.r0)}} FPC</div>
  </div>
  <div class="mbox">
  <div class="items">
    <div class="txt">{{$t('m.个人质押算力')}}</div>
    <div class="num">{{dexc(info.r1)}}</div>
  </div>
  <div class="items m16">
    <div class="txt"> {{$t('m.当前个人质押')}}</div>
    <div class="num">{{dexc(grzyNum)}}  FPC</div>
  </div>
  <div class="items m16">
    <div class="txt"> {{$t('m.个人累计质押')}}</div>
    <div class="num">{{dexc(info.r2)}} FPC</div>
  </div>
</div>
<div class="mbox">
  <div class="item">
    <div class="txt">{{$t('m.可质押余额')}}</div>
    <div class="right" @click="getMyArb"> 
      <div class="num">{{myArb||0}} FPC</div>
  </div>   
  </div>
</div>

<div class="card">
      <div class="titles">
        {{$t('m.实时质押')}}
      </div>
      <div class="boxs"  >
        <div class="cont">          
            <div class="sinput">                       
             <input type="text" class="input" v-model="xzNum" :placeholder="$t('m.请输入质押数量')" @input="jsArbnum">
             <div class="txt" @click="toMax">{{$t('m.最大')}}</div>
            </div>
        </div>
        
            <div class="linex">
          <div class="left">{{$t('m.基础算力系数')}}</div>
          <div class="num">{{factor||0}} %</div>
        </div>
        <div class="linex">
          <div class="left">{{$t('m.您将会得到')}}：</div>
          <div class="num">{{xzNum?(xzNum*factor/100):0}} {{$t('m.算力')}}</div>
        </div>
      </div> 
 
      <div class="buttom" >
        <van-button
          type="primary"
          class="btn" 
          :class="xzNum>0?'act':''" 
          :loading="loading"
          @click="toOrder"
          >
         {{$t('m.确认质押')}}</van-button
        >
      </div>
     </div>
</div>


     <div class="title">{{$t('m.代币质押记录')}}</div>
     <div class="tabnav">
      <div class="item" :class="acitve==1?'act':'' " @click="toTab(1)">{{$t('m.运行中')}}</div>
      <div class="item" :class="acitve==2?'act':'' " @click="toTab(2)">{{$t('m.已结束')}}</div>
     </div>
     <div class="list">
      <div class="" v-for="(item,i) in list" :key="i">
        <div class="item fadeInUp" :class="item.status==2?'over':''" v-if="item.status==acitve">
        <div class="cont">
          <div class="ritem">
          <div class="laber">NO.{{item.id}}</div>
          <div class="num">{{item.timestamp|formatDate}}</div>
        </div>
        <div class="ritem fr">
          <div class="laber">{{$t('m.质押数量')}}</div>
          <div class="num">{{dexc(item.amount)}} FP</div>
        </div>
        </div>    
        <div class="cont">
          <div class="ritem ">
          <div class="laber">{{$t('m.基础算力系数')}}</div>
          <div class="num"> {{item.factor/10}}%</div>
        </div>
        <div class="ritem fr" v-if="item.status==1">
          <div class="laber">{{$t('m.待领取利息')}}</div>
          <div class="num">{{dexc(item.interest)}}</div>
        </div>
        <div class="ritem fr" v-if="item.status==2">
          <div class="laber">{{$t('m.解押时间')}}</div>
          <div class="num">{{item.unStakeTime|formatDate}}</div>
        </div>
        </div>
        <div class="cont" v-if="item.status==1">
          <div class="ritem ">
          <div class="laber">{{$t('m.订单算力值')}}</div>
          <div class="num">{{dexc(item.power)}}</div>
        </div>
        <div class="ritem fr">
          <div class="laber">{{$t('m.当前状态')}}</div>
          <div class="num org">{{$t('m.质押中')}}</div>
        </div>
        </div>

        <div class="cont" v-if="item.status==2">
        <div class="ritem ">
          <div class="laber">{{$t('m.当前状态')}}</div>
          <div class="num hui">{{$t('m.已解押')}}</div>
        </div>
        </div>
        <div class="buttom" v-if="item.status==1">
          <van-button
          :loading="loadings"
          type="primary"
          class="btn act"
          @click="toUnStake(item.id)"
        > 
        {{$t('m.解押')}}</van-button
        >
        <van-button
          :loading="loadings"
          type="primary"
          class="btn"
          @click="toReceive(item)"
          > 
        {{$t('m.领取利息')}}</van-button
        >
        </div>
      </div>
    </div>
        <div v-if="list.length==0"  class="noData">
           <img src="../assets/img/logo.png" alt="" >
           <div class="ttx">{{$t('m.mysj')}}</div>
      </div>
     </div>

      
  <div class="buttoms">
    </div>
    <Bottom/>
    </div>

   

<!-- 授权 -->
 <van-popup v-model="impower" round :close-on-click-overlay="false">
      <div class="popup">     
          <div class="top"> 
        <div class="title">{{ $t("m.sqbtn") }}</div></div>
        <div class="txt m66">{{$t('m.sqinfo')}}</div>
        <div class="flsz">       
         <div class="btn" @click="approve">
          {{ sqloading ? $t("m.sqload") : $t("m.sqbtn") }}
        </div>
        </div>
      </div>
    </van-popup>
    


    <van-popup v-model="shows" round :close-on-click-overlay="false">
      <div class="popup">
        <div class="top"> 
        <div class="title">{{ $t("m.dltt") }}</div></div>
        <div class="txt">{{ $t("m.dlinfo") }}</div>
        <div class="btns" @click="ethConnect">{{ $t("m.dlbtn") }}</div>     
      </div>
    </van-popup>

 <!-- <van-popup v-model="bdshows" round :close-on-click-overlay="!bdshows">
      <div class="popup">
             <div class="top"> 
        <div class="title">{{ $t("m.bdtt") }}</div></div>
        <div class="txt">{{ $t("m.bdinfo") }}</div>
        <div>
          <input type="text" class="input" v-model="yqmcode" />
        </div>
        <van-button
          :loading="bdloading"
          type="primary"
          @click="tobding"
          class="btn"
          :loading-text="$t('m.bdload')"
        >
          {{ $t("m.bdbtn") }}</van-button
        >
      </div>
    </van-popup> -->
  </div>
</template>

<script>
import { connectTron ,Sign,getFactor,getMyArc,getProvedsFpc,toApproveFpc,toSetOrderFpc,getFPCData,getFpcStakeOrders,toSetUnOrderFpc,toSetClaimInterestFpc} from "@/api/Public";
import Header from '../components/header.vue';
import Bottom from '../components/bottom.vue';
import Web3 from 'web3'
export default {
  name: "Home",
  components: {Header,Bottom},
  data() {
    return {
      sxshow:false,
      acitve:1,
      sqArcNum:"",
      xzNum:"",
      myArb:"",
      shows:false,
      lqloading:false,
      impower:false,
      sqloading:false,
      lqshows:false,
      loading:false,
      loadings:false,
      info:'',
      factor:"",
      grzyNum:'',
      list:[],
      isOpen:true,
    };
  },
  filters: {
      Endtime(e){
    var    end_str = (e).replace(/-/g,"/");//一般得到的时间的格式都是：yyyy-MM-dd hh24:mi:ss，所以我就用了这个做例子，是/的格式，就不用replace了。  
    var end_date =new Date(end_str)-new Date;//将字符串转化为时间  
    return end_date
    },
   
    formatDate(e) {
      if (e == 0) {
        return "";
      } else {
        let date = new Date(e * 1000);
        let Y = date.getFullYear();
        let M = date.getMonth() + 1;
        let D = date.getDate();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        if (M < 10) {
          M = "0" + M;
        }
        if (D < 10) {
          D = "0" + D;
        }
        if (h < 10) {
          h = "0" + h;
        }
        if (m < 10) {
          m = "0" + m;
        }
        if (s < 10) {
          s = "0" + s;
        }
        return `${Y}/${M}/${D} ${h}:${m}:${s}`;
      }
    },
    yingcang(val) {
      if (val) {
        let a = val.replace(/(\w{7})\w+(\w{4})/, "$1...$2");       
        return a;
      } else {
        return "...";
      }
    },
      time(time){
      if(time){
        var reg = /^(\d{4})-(\d{1,2})-(\d{1,2})\s(\d{1,2})(:(\d{1,2})){2}$/;
        var end = time.match(reg).slice(1,4).join('-');
        return end
      }
    }
  },
   watch: {
    "$store.getters.userWallet": function (val) {
       this.pustadd(val)
    },  
    deep: true,
    immediate: true,
  },
  // beforeCreate(){
  //   this.ethConnect()
  // },
  beforeCreate() {
    if(this.$store.getters.userWallet){return}
    var i = 0;
    var a = setInterval(() => {
      if (typeof window.ethereum !== "undefined") {
        connectTron().then(
          (info) => {
            clearInterval(a);
            if (info[0]&&info[0].indexOf("0x") == 0) {
              if(this.$store.getters.myFil!=info[0]){  
                this.userWallet =  info[0]   
                 this.$store.commit("userWallet", info[0]);   
                this.impower=true
               
                // this.yanzheng(info[0])
              }else{
                this.$store.commit("userWallet", info[0]); 
                // this.pustadd(info[0])   
                this.cread(info[0])
                        
              }
              //    
              //      
              
            } else {
              // this.$notify("请使用HECO地址登录游戏");
              this.shows=true
            }
          }
        );
      }
      if (i > 5) {
        // this.$notify("钱包失联了！！");
        this.shows=true
        clearInterval(a);
      }
      //console.log(i);
      i++;
    }, 1000);
  },
  created() { 
      this.yqmcode = this.getQueryString("code");
      this.userWallet = this.$store.getters.userWallet;  
      this.cread()   
      this.getFactor() 
 
  },

  computed: {
    dqyy() {
      if (this.$store.getters.language) {
        return this.$store.getters.language;
      } else {
        return "en-US";
      }
    },  
  },
  methods:{
    getFactor(){
            if(!this.isOpen){return}
      getFactor().then(res=>{
        this.factor=res
      })
    },
    toMax(){
      this.xzNum=this.myArb
    },
    dexc(val){
    if(val){
      let  ethereum = window.ethereum
    let web3s = new Web3(ethereum);
      let amount=  web3s.utils.fromWei(val +'', 'ether'); 
      // let num =val/Math.pow(10,18)
      return val?  Math.round(amount*1000000)/1000000:'0'
    }else{
      return 0
    }
    },
    toTab(e){
      this.acitve=e
      if(!this.list){
        this.getOrder() 
      }
    },
    getMyArb(){
            if(!this.isOpen){return}
      getMyArc(this.userWallet).then(res=>{
        //console.log(res);
        this.myArb=(res*1).toFixed(6)
      })
    },
    toReceive(row){
      if(row.interest>0){
      this.loadings=true
      toSetClaimInterestFpc(this.userWallet,row.id).then(res=>{
      this.loadings=false
      if(res){
        this.$notify({
                message: this.$i18n.t("m.操作成功"),
                type: "success",
              });
        this.getOrder()
      }else{
        this.$notify({
                message: this.$i18n.t("m.操作失败"),
                type: "danger",
              });
      }
    })
  }
    },
    toUnStake(orderId){
    this.loadings=true
    toSetUnOrderFpc(this.userWallet,orderId).then(res=>{
      this.loadings=false
      if(res){
        this.$notify({
                message: this.$i18n.t("m.操作成功"),
                type: "success",
              });
        this.acitve=2
        this.getOrder()
        this.upData()
      }else{
        this.$notify({
                message: this.$i18n.t("m.操作失败"),
                type: "danger",
              });
      }
    })
  },

    jsArbnum(){
      setTimeout(() => {
        this.sqArcNum=this.xzNum
      }, 100);
    },  
    async toJoin(){
      if(this.xzNum>=100){ 
        this.loading=true
       await this.toGetsq()
       this.sqArcNum=this.xzNum
       this.lqshows=true   
      
      }else{
        this.$notify({
                message: this.$i18n.t("m.min100"),
                type: "danger",
              });
      }
    },
    async toGetsq(){
      this.sqNums=await getProvedsFpc(this.userWallet).then(res=>{ return res})
      //console.log(this.sqNums);
    },
   async toOrder(){
          if(!this.isOpen){return}
       if(this.xzNum<=0){return}
       if(!this.userWallet){return}
      this.loading=true
      await this.toGetsq()
      // //console.log(this.sqUsdtNum -this.sqNum>0);
      if(this.sqArcNum -this.sqNums>0){
        let num=Math.ceil(this.sqArcNum)
        toApproveFpc(this.userWallet,num).then(res=>{
            // //console.log(res);
            this.loadings=false
            if(res){    
             this.sqNums= this.sqArcNum 
              this.toOrder() 
            }else{
                this.loading=false
              }
        })
      }else {
        toSetOrderFpc(this.userWallet,this.xzNum).then(res=>{
            //console.log(res);
            this.loading=false
            if(res){
              this.lqshows=false
              this.loading=false
              this.$notify({
                message: this.$i18n.t("m.操作成功"),
                type: "success",
              });
              this.getOrder()
              this.upData()
            }else{
              this.$notify({
                message: this.$i18n.t("m.操作失败"),
                type: "danger",
              });
            }
          })
      }
  },
    upData(){
      this.getInfo()
      this.getMyArb()
    },

    toOpen(url) {
       window.open(url)
    },
    cread(val) {
            if(!this.isOpen){return}
      this.userWallet = this.$store.getters.userWallet||val;  
      // //console.log(this.userWallet,'userWallet');
      if(this.userWallet){
        this.getInfo()  
          this.getMyArb()   
          this.getOrder() 
        let baseUrl=((window.location.href).split("/#/"))[0]
    if(baseUrl.indexOf('?')){
        baseUrl= ((baseUrl).split("/?"))[0]
        this.codeWallet= baseUrl+"?code=" +  this.userWallet  
    }else{
       this.codeWallet= baseUrl+"?code=" +  this.userWallet
    }          
      }else{
        this.shows=true
      }
    },
    getOrder(){
            if(!this.isOpen){return}
      getFpcStakeOrders(this.userWallet).then(res=>{
        //console.log('order',res);
        this.grzyNum=BigInt(0)
        this.list=res.map(el=>{
              let obj=Object.assign({},el)
              if(obj.status==1){
              this.grzyNum=this.grzyNum+BigInt(obj.amount)  
              }         
              return obj         
          })
      })
    },
    getInfo(){
            if(!this.isOpen){return}
      getFPCData(this.userWallet).then(res=>{
        this.info=res
      })
    },
    approve() {
          if (this.userWallet) {
            this.sqloading = true;
            Sign(this.userWallet).then((rs) => {
              this.sqloading = false;
              if (rs) {
                this.impower = false;
                this.$store.commit("myFil", this.userWallet);
                this.cread(this.userWallet);
                this.$store.commit("userWallet", this.userWallet);
              }
            });
          }
      },
    tobding() {
      if (this.yqmcode) {
        if (this.bdloading) {
          this.$toast(this.$i18n.t("m.bdload"));
          return;
        } else {
          getCanBind(this.yqmcode).then(res=>{
            if(res){
            this.bdloading = true;
          //console.log(this.yqmcode);
          // this.$toast(this.yqmcode);
          this.bangding(this.yqmcode);
            }else{
              // this.$toast(this.$i18n.t("m.dqzdbmz"));
              this.$notify(this.$i18n.t("m.dqzdbmz"))
            }
          })        
        }
      } else {
        this.$toast(this.$i18n.t("m.bdinfo"));
      }
    }, 
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    ethConnect() {
      connectTron().then((info) => {
        if (info[0]&&info[0].indexOf("0x") == 0) {          
           this.shows=false      
           this.cread(info[0])
           this.$store.commit("userWallet", info[0]);            
         
        }
      });
    },
    pustadd(info){     
      // this.$store.commit("userWallet", info); 
      if(info){
      this.impower=true
      }else{
        this.shows=true
      }
    },
    async bangding(code) {       
        if (code) {
          if(code==this.userWallet){return}
          toBind(this.userWallet,code).then(res=>{
            this.bdloading = false;
            if(res){
              this.$toast(this.$i18n.t("m.bangsuc"));
              this.bdshows = false;
            }             
          })      
        } else {
          this.bdloading = false;
        }      
    },  
  },
};
</script>

<style lang="scss" scoped>
@import "../../src/assets/scss/_handle.scss";

$t-mf: "PingFang";
$t-f: "DINAlternate-Bold";

.home {
  background:  #130700   no-repeat;
  // background: #161628;
  background-size:contain;
  background-position: center bottom;
  overflow-x: hidden;
  width: 750px;
  margin: 0 auto;


  .content {
    margin-top: 100px;
    padding-top: 50px;
    .price{
      background: #130700;
      border-radius: 18px;
      min-height: 360px;
      width: 680px;
      margin: 16px auto;
      border: 2px solid #582204;
      overflow: hidden;
      padding: 0 24px 16px ;
      box-sizing: border-box;
      .box{
        height: 102px;
        width: 100%;
        border-radius:16px 16px 280px 16px ;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 40px 10px;
        .txt{
          font-size: 28px;
          color: #A6A6A6;
        }
        .num{
          font-size: 48px;
          color: #FF7C36;
          font-weight: bold;
          margin-top: 10px;
        }
      }
      .mbox{
         display: table;
        justify-content: space-between;
        align-items: flex-start;
        border-spacing: 16px;
        border-collapse: separate;
        width: 100%;
      }
      .item{
        border-bottom: 1px solid #582204;
        width: calc(100% - 16px);
        min-height: 120px;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        margin:8px ;
        padding: 20px;
        box-sizing: border-box;
        .txt{
          font-size: 26px;
          color: #A6A6A6;
          font-weight: bold;
        }
        .num{
          font-size: 24px;
        
          color: #ffffff;
        padding-left: 8px;
        text-align: right;
        }
        .snum{
          font-size: 24px;
        color: #aba3a3;
        padding-top: 8px;
        text-align: right;
        }
      }
      .items{
         border-radius: 26px;
        min-height: 160px;
        overflow: hidden;
        width: 33% ;
        display: table-cell;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 8px ;
        padding: 40px 10px;
        box-sizing: border-box;
        border: 2px solid #582204;
        .txt{
          font-size: 24px;
          color: #A6A6A6;
          width: 100%;
        }
        .txt::-webkit-scrollbar {
          display: none;
          }
        .num{
          font-size: 24px;
        color: #ffffff;
        padding-left: 8px;
        margin-top: 16px;
        }
      }
      .actc{
        border: 1px solid #582204;
      }
    }



































    .card { 
          align-items: center;
      padding: 30px 10px;
      margin: 20px auto 20px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .titles{
        font-size: 32px;
          font-weight: 600;
          color: #ffffff;
          padding-bottom: 40px;
          width: 100%;       
      }
        
        
      .title{
        font-size: 32px;
        font-weight: 600;
        color: #ffffff;
        line-height: 50px;
        text-align: center;        
        margin: 16px auto;
      }

    .buttom{
        display: flex;
        width: 100%;    
        margin-top: 30px;  
        padding-top: 30px;        
        .btn{
            background: transparent;
          color: #A6a6a6;
          border: 1px solid #582204;
          border-radius: 32px;
          height: 112px;
          width: calc(100% - 32px);
          font-size: 32px;
          margin:  0 auto;
          font-weight: bold;
        }
       
        .act{
          color: #ffffff;
          background: #FF7C36;
          border: 1px solid #FF7C36;
        }
      }
    .boxs{
        width: 100%;        
        .cont{
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          .sinput{
            flex: 1;
              width:auto;
              padding: 5px 0px;
              border-radius: 100px;
              margin: 0px 0 18px;
              height: 84px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              box-sizing: border-box;              
            border: 1px solid #582204;
              .input{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            background: transparent;
            font-size: 28px;
            // border-radius: 100px;
            height: 64px;
             padding:0 20px 0 36px;
            box-sizing: border-box;    
    color: #ffffff;
    border: none;
    min-width: 100px;
    text-align: left;
          }
              
              .txt{
                color: #ffffff;
                font-size: 28px;
                font-weight: bold;
                margin-right: 16px;
                min-width: 86px;
              }
            }
            
        }
        .linex{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0 16px;
          width: 100%;
          .left{
            color: #A6A6A6;
                font-size: 24px;
                font-weight: bold;
                margin: 16px;
                min-width: 86px;
          }
          .num{
            color: #ffffff;
                font-size: 24px;
                font-weight: bold;
                margin: 16px;
                min-width: 86px;
          }
        }
      }
  
  }

  .title{
      font-size: 48px;
      font-weight: bold;
      color: #ffffff;
      position: relative;
      margin: 80px auto 40px;
    }
  .tabnav{
    display: flex;
    align-items: center;
    height: 68px;
    justify-content: center;
    // border-bottom: 1px solid #582204;
    padding-bottom: 6px;
    .item{
      width: 340px;
      height: 68px;
      font-size: 28px;
      color: #A6A6A6;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
    }
    .act{
      font-weight: bold;
      color: #FF7C36;
    }
  }

  .list{
    margin-bottom: 80px;
    min-height: 40vh;
    .item{
      border-radius: 40px;
      padding: 0 30px;
      margin: 20px 30px 20px;
      border: 1px solid #582204;
      position: relative;
      overflow: hidden;
      .cont{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 40px 0;
        .ritem{
          display: flex;
        align-items: flex-start;
        flex-direction: column;
        .laber{
          font-size: 24px;
          color: #a6a6a6;
        }
        .num{
          font-size: 32px;
          color: #ffffff;
          margin-top: 8px;
          text-align: left;
        }
        .org{
          color: #FF7C36;
          font-weight: bold;
        }
        .hui{
          color: #a6a6a6;
          font-weight: bold;
        }
        }  
        .fr{
          align-items: flex-end;
        }       
      }
      .buttom{
        display: flex;
        width: 100%;    
        margin-top: 30px;  
        padding-top: 30px;  
        margin-bottom: 40px;      
        border-top: 1px solid #582204;
        .btn{
         background: transparent;
          color: #ffffff;
          border: none;
          border-radius: 32px;
          height: 102px;
          width: calc(100% - 32px);
          font-size: 32px;
          margin:  0 16px;
          font-weight: bold;
          border: 1px solid #FF7C36;
          
        }
        .img{
          width: 38px;
          height: 38px;
        }
        .btn:hover{
          color: #ffffff;
          background: linear-gradient(270deg, #FF7C36, #FF7C36);
        }
      }
    }
    .over{
        .num{
          color: #a6a6a6 !important;
        }
       }
  }
    
  }
 

  .popup {
    width: 672px;
    background: #130700;
    border:1px solid #582204;
    // border-radius: 30px;
        padding: 30px 30px 40px;
        box-sizing: border-box;
    ::v-deep.van-list{
      height: 50vh;
    overflow: auto;
    }
    ::v-deep .van-stepper__input{
          font-size: 42px;
        }
   
    .tips{
      font-size: 28px;
      font-family: $t-mf;
      font-weight: 600;
      color: #999999;
      line-height: 66px;
      margin: 24px auto;
    }
    .inode {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      background: #f1f1f1;
      // border-radius: 8px;
      margin: 8px 34px;
      padding: 20px 8px;
      font-weight: 400;
      font-size: 28px;
      font-family: $t-f;
      .items{
         display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      .line{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px ;
        flex: 1;
        .left {
        text-align: left;
          font-size: 22px;
          font-family: $t-mf;
          font-weight: 400;
          color: #999;
          line-height: 32px;
      }
      .right {
        font-size: 22px;
        font-family: $t-f;
        font-weight: 600;
        color: #131415;
        line-height: 32px;
      }
      }}
      .fuzhi {
        background: transparent;
        border: none;
        color: #1755ee;
      }
    }
    .input {
      border: none;
      width: 85%;
      height: 80px;
      background: transparent;
      border: 1px solid #582204;
      color: #ffffff;
      // border-radius: 50px;
      border-radius: 40px;
      margin: 40px auto 0;
      padding: 10px 20px;
      font-size: 28px;
      // background: transparent;
      
    }
    .bg{
       background: linear-gradient(234deg,#e4005e, #b4184c);
        margin: 20px 34px;
       padding:10px;
       
    // border-radius: 20px;
       
    }
    .logo{
      // height:188px;
      width: 188px;
      margin: 44px auto 20px;
    }
    .item {
     display: flex;
     align-items: center;
     justify-content: space-between;
       background:#262626;
      //  border-radius: 10px;
    padding: 0 10px;
      .txts {
        font-size: 32px;
        font-family: $t-f;
        text-align: right;
        margin: 10px 0;
    font-weight: bold;
    line-height: 54px;
     background: linear-gradient(234deg,#e4005e, #b4184c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .flexs{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 0;
      
        .tts{
           font-size: 28px;
          font-family: $t-mf;
         color: #ffffff;
          line-height: 40px;
          text-align: center;
          margin: 0 10px ;
          
        }
      }
      .txd{
        margin: 20px 0;
        text-align: left;
        font-size: 24px;
        font-family: $t-f;
        font-weight: 600;
        color: #f8f8f8;
        line-height: 40px;
      }
      .inputs {
        border: none;
        height: 50px;
        width: 100%;
        font-size: 34px;
        font-family: $t-f;
      }
    }
    .txt {
      font-size: 28px;
      font-family: $t-mf;
      font-weight: 400;
      color: #ffffff;
      line-height: 40px;     
      text-align: left;
    }
    .m66{
       margin: 66px auto;
    }
      .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 32px;
            .close{
                width:28px;
            }
             .title{
            width: 100%;
            font-size:32px;
            font-weight: bold;
            color: #ffffff;
            text-align: center;
            border-bottom:1px solid #582204;
            padding-bottom: 30px;
        }
        }
         .sqtxts{
      font-size: 24px;
      font-family:$t-f;
      font-weight: 600;
      color: #848484;
      line-height: 44px;
      margin: 10px 0 45px;
      padding: 0 22px;
      box-sizing: border-box;
      text-align: left;
    }
    .sqtxt{
      font-size: 32px;
      font-family:$t-f;
      font-weight: 600;
      color: #848484;
      line-height: 44px;
      margin: 10px 0 45px;
      padding: 0 22px;
      box-sizing: border-box;
    }
    .xbox{
       background: #F3F0F4;
            padding: 10px 20px;
            border-radius: 36px;
             display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 16px auto;
              .num{
          //  margin: 22px auto;
        font-size: 24px;
        font-family: $t-f;
        font-weight: bold;
          background: linear-gradient(34deg, #1fa391, #28514b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        }
            .txt{
              color: #ffffff;
                font-size: 24px;
                font-weight: bold;
                margin:  0 10px;
            }
    }
    .rbox{
            display: flex;
            align-items: center;
            justify-content: center;
           
            .num{
          //  margin: 22px auto;
        font-size: 42px;
        font-family: $t-f;
        font-weight: bold;
          background: linear-gradient(234deg, #106156, #cc1d1d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        }
            .txt{
              color: #2A2A2A;
                font-size: 24px;
                font-weight: bold;
                margin:  0 10px;
            }
            .ico{
              width: 40px;
              height: 40px;
            }
          }
    .flsz{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .cnet{
      text-align: center;
      font-size: 46px;
    }
    .btn {
     width: calc(100% - 200px);
      height: 112px;
      font-size: 32px;
      font-family: $t-mf;
      font-weight: 600;
      color: #ffffff;
      line-height: 80px;
      margin: 40px auto 0;
          background: #FF7C36;
          border: 1px solid #FF7C36;
border-radius: 40px;
border: none;
  display: flex;
      align-items: center;
      justify-content: center;
    }
     .btns {
      width: 480px;
      height: 112px;
      font-size: 32px;
      font-family: $t-mf;
      font-weight: 600;
      color: #ffffff;
      line-height: 80px;
      margin: 40px auto 0;
// background: linear-gradient(90deg, #F83AFD 0%, #C333FF 31%, #A84BFF 49%, #724EFF 79%, #495AFA 100%);
// box-shadow: 0px 4px 16px 4px rgba(207,182,247,1);
          background: #FF7C36;
          border: 1px solid #FF7C36;
border-radius: 32px;
border: none;
  display: flex;
      align-items: center;
      justify-content: center;
    }
    .nbtn{
      width: 100%;
      height: 80px;
box-shadow: 0px 4px 16px 4px rgba(227,211,253,1);
// border-radius: 40px;
border: 2px solid rgba(115, 40, 236, 0.5);
font-size: 32px;
font-family: $t-f;
margin: 54px 20px;
font-weight: 600;
color: #b4184c;
line-height: 44px;
  display: flex;
      align-items: center;
      justify-content: center;
    }
    .lang {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 50px auto;
      img {
        height: 50px;
        width: 50px;
      }
      span {
        font-size: 28px;
        font-family: $t-mf;
        font-weight: 400;
        @include font_color("font_color1");
        line-height: 40px;
      }
    }
 
  }
  .flexbottom{
    position: fixed;
    bottom: 0;
    width: 750px;
    height: 160px;
    background: linear-gradient(18deg, #ffdf2d, #00e2be);
    z-index: 99;
    // border-radius: 50% 50% 0 0;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .txt{
    font-size: 28px;
    font-weight: 600;
    font-family: $t-f;
    line-height: 42px;
    }
  }
   .infos{
        font-size: 28px;
        font-weight: 600;
        font-family: $t-mf;
        text-align: justify;
        background: #000000;
        display: flex;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
      .video{
        width: 100%;
        height: 100vh;
      }
      }
}
.buttoms{
  padding-bottom: 180px;
  font-size: 20px;
  color: #a6a6a6;
  .imgline{
    .img{
      width: 56px;
      height: 56px;
      margin: 20px;
    }

  }
}
</style>
